import logo from './logo.svg';
import './App.css';
import {getConfig} from "./api/office";
import Cookies from "js-cookie";
import {DocumentEditor} from "@onlyoffice/document-editor-react";
import {useEffect, useState} from "react";

const onDocumentReady = function (event) {
    console.log("Document is loaded");
};
const onLoadComponentError = function (errorCode, errorDescription) {
    switch (errorCode) {
        case -1: // Unknown error loading component
            console.log(errorDescription);
            break;

        case -2: // Error load DocsAPI from http://documentserver/
            console.log(errorDescription);
            break;

        case -3: // DocsAPI is not defined
            console.log(errorDescription);
            break;
    }
};

function App() {


    let config = {
        "document": {
            "fileType": "docx",
            "key": "test.docx",
            "permissions": {
                "comment": true,
                "download": true,
                "edit": true,
                "print": true,
                "review": true
            },
            "title": "test.docx",
            "url": "http://192.168.31.185:16060/api/document/test.docx"
        },
        "documentType": "word",
        "editorConfig": {
            "callbackUrl": "http://192.168.31.185:5000/api/document/test.docx/callback",
            "customization": {
                "autosave": true,
                "chat": true,
                "comments": true,
                "features": {
                    "spellcheck": true
                },
                "zoom": 100
            },
            "lang": "zh-CN",
            "mode": "edit",
            "user": {
                "id": "user1",
                "name": "User Name"
            }
        },
        "height": "100%",
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJrZXkiOiJ0ZXN0LmRvY3giLCJ1cmwiOiJodHRwOi8vMTkyLjE2OC4zMS4xODU6MTYwNjAvYXBpL2RvY3VtZW50L3Rlc3QuZG9jeCIsImZpbGVUeXBlIjoiZG9jeCIsInRpdGxlIjoidGVzdC5kb2N4In0sImVkaXRvckNvbmZpZyI6eyJtb2RlIjoiZWRpdCIsImxhbmciOiJ6aC1DTiIsImNhbGxiYWNrVXJsIjoiaHR0cDovLzE5Mi4xNjguMzEuMTg1OjUwMDAvYXBpL2RvY3VtZW50L3Rlc3QuZG9jeC9jYWxsYmFjayIsImN1c3RvbWl6YXRpb24iOnsiYXV0b3NhdmUiOnRydWUsImNoYXQiOnRydWUsImNvbW1lbnRzIjp0cnVlLCJ6b29tIjoxMDAsImZlYXR1cmVzIjp7InNwZWxsY2hlY2siOnRydWV9fSwidXNlciI6eyJpZCI6InVzZXIxIiwibmFtZSI6IlVzZXIgTmFtZSJ9fSwiaWF0IjoxNzMxNzIyMTQxLjQ3NTkyNCwiZXhwIjoxNzMxNzI1NzQxLjQ3NTkyNH0.188sGdoieW3CKvrXN-mtLcTyshS1Y_nAIxTq7nDKTF4",
        "width": "100%"
    }

    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchData() {
            try{
                const response = await getConfig("test.docx")
                setData(response.data);
                console.log('config',response.data)
            }catch (error){
                console.log('error',error)
            }finally {
                setLoading(false)
            }

        }
        fetchData()
    }, []);

    if (loading) {
        return <div>Loading...</div>;
    }
    console.log('data',data)
    return (
        <div style={{height:"900px"}}>
            <DocumentEditor
                id="docxEditor"
                documentServerUrl="http://localhost/"
                config={data}
                events_onDocumentReady={onDocumentReady}
                onLoadComponentError={onLoadComponentError}
            />
        </div>
    );

}

export default App;
